<template>
	<view class="page">
		<view class="page-ctx">
			<view class="product-info">
				<view class="product-item flex">
					<view class="poster-box">
						<image :src="product.image" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="title-box">
							<view class="title">
								{{product.title}}
							</view>
						</view>
						<view class="desc-box">
							<view class="desc ellipsis-1">
								{{product.remark || ''}}
							</view>
						</view>
						<view class="desc-box">
							<view class="desc ellipsis-1">
								{{product.keyVals }}
							</view>
						</view>
						<view class="price-box flex-between">
							<view class="price-info">
								<text class="huobi">￥</text>
								<text class="price">{{product.priceSale || 0}}</text>
								<text class="unit" v-if="product.unit">/{{product.unit}}</text>
							</view>
							<text class="num">x {{product.num}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="refund-info">
				<view class="refund-reason flex-between" @click="openReason()">
					<view class="label">
						退款原因
					</view>
					<view class="value flex">
						<view class="value-text ellipsis-1">
							{{refund_reason || '请选择' }}
						</view>
						<image src="@/static/common/arrow.png"></image>
					</view>
				</view>

				<view v-if="refund_title == '仅退款' || refund_title == '退货退款'" class="refund-money flex-between">
					<view class="label">
						退款金额
					</view>
					<view class="label-tip">
						最多￥{{maxPrice||0}}
					</view>
					<view class="value flex">
						<text class="huobi">￥</text>
						<input v-model="refund_money" type="digit" value="" @input="inputRefundMoney" class="input"
							placeholder-class="input-p" placeholder="金额" :style="{width: String(refund_money).length / 2 + 'em'}" />
						<image src="@/static/common/edit.png"></image>
					</view>
				</view>


				<view v-if="refund_title == '换货'" class="refund-reason flex-between" @click="openGuige()">
					<view class="label">
						换新商品
					</view>
					<view class="value flex">
						<view class="value-text ellipsis-1">
							{{exchange_guige || '请选择' }}
						</view>
						<image src="@/static/common/arrow.png"></image>
					</view>
				</view>



				<view v-if="refund_title == '换货'" class="addr-wrap">
					<view class="addr-item" @click="toChooseAddress()">
						<view class="addr-inner">
							<view class="addr-left">

								<view class="info-box" v-if="address_selected && address_selected.name">
									<view class="user-info">
										<text class="name">{{address_selected.name}}</text>
										<text class="phone">{{address_selected.phone}}</text>
										<!-- <text class="desc" v-if="address_selected.moren == 1">[默认地址]</text> -->
									</view>
									<view class="address-info">
										{{address_selected.full_addr}}
										<view class="address-detail">
											{{address_selected.address}}
										</view>
									</view>
								</view>
								<view class="addr-empty" v-else>
									收货地址
								</view>
							</view>

							<view class="addr-right flex-center">
								<text v-if="!address_selected.id">请选择</text>
								<image src="@/static/payment/arrow.png"></image>
							</view>
						</view>
					</view>
				</view>



			</view>


			<view class="feedback-info">
				<view class="main-title">
					上传描述和凭证
				</view>
				<view class="textarea-box">
					<textarea v-model="refund_remark" maxlength="200" :auto-height="true" value=""
						placeholder="补充描述，有助于商家更好的处理售后问题" placeholder-class="textarea-p" />
					<text class="statistice-count">{{refund_remark.length}}/200</text>
				</view>


				<view class="upload-wrap flex">
					<view class="upload-list">
						<view class="upload-item" v-for="(item,index) in upload_pic_list" :key="index" @click="doPreview(item)">
							<view class="remove-box" @click.stop="doRemove(item, index)">
								<image src="@/static/review/remove.png" mode=""></image>
							</view>
							<view class="preview-box clip-item">
								<image :src="item" mode=""></image>
							</view>
						</view>

						<view class="upload-box column-flex-center" @click="doUpload()" v-if="upload_pic_list &&  upload_pic_list.length<6">
							<view class="icon-box">
								<image src="@/static/review/upload.png" mode=""></image>
							</view>
							<view class="title">
								添加图片
							</view>
							<view class="tip" >
								（最多{{allowUploadNumber}}张）
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="return-info" v-if="refund_title == '退货退款'">
				<view class="store-address">
					<view class="tui-type">
						<text>退货方式</text>
						<text>自行寄回</text>
					</view>
					<view class="address">
						<text>商家地址</text>
						<view class="right">
							<view class="address-info">
								<view class="title">
									{{vuex_config.comAddress||""}}
								</view>
								<view class="user">
									<text>{{vuex_config.comTitle||""}} {{vuex_config.comPhone||""}}</text>
								</view>
							</view>
							<!-- <image src="@/static/common/arrow.png"></image> -->
						</view>
					</view>
				</view>
			</view>

		</view>


		<w_bottom_safe height="140"></w_bottom_safe>


		<view class="page-foot">
			<view class="safe-fixed-bottom">
				<view class="btn flex-center btn-cancel" @click="doSubmit()">
					提交申请
				</view>
			</view>
		</view>


		<refund_choose_reason_pop data-title="售后原因" ref="refund_choose_reason_pop" @confirm="confirmReason" />
		<refund_choose_guige_pop data-title="换货选择规格" ref="refund_choose_guige_pop" @confirm="confirmGuige" />
	</view>
</template>

<script>
	import refund_choose_reason_pop from '@/components/refund/refund_choose_reason_pop.vue'
	import refund_choose_guige_pop from '@/components/refund/refund_choose_guige_pop.vue'
	export default {
		components: {
			refund_choose_reason_pop,
			refund_choose_guige_pop,
		},
		data() {
			return {
				orderId: '',
				productId: '',
				inventoryId: '',
				buyNumber: '', //购买数量
				type: '', //退换货类型(1-退款 2-退货退款 3-换货)
				refund_title: '', //


				product: {},
				upload_pic_list: [], //已上传图片链接
				allowUploadNumber: 6, //允许上传的最大图片数量
				maxPrice: 0,


				refund_reason: '',
				refund_money: '',
				refund_remark: '',

				focus: false,


				//换货信息
				exchange_products: [],
				exchange_guige: '',
				new_product: [],
				address_selected: {}, //地址
			};
		},
		computed: {
			refund_reasons() {
				return this.vuex_config.tuihuan_reason
			}
		},


		onLoad(option) {
			this.orderId = option.orderId
			// this.productId = option.productId
			// this.buyNumber = option.buyNumber
			this.inventoryId = option.inventoryId
			this.type = option.type
			this.refund_title = option.title

			this.setView();
		},
		onShow() {
			console.log('page onShow', this.refund_title)
			if (this.refund_title == '换货') {
				this.query_address();
			}
		},

		methods: {
			setView() {
				this.query_order();
			},
			query_order() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'orders_detail',
						id: this.orderId
					},
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.product = data.products.find(v => v.id == this.inventoryId)
						this.maxPrice = parseFloat(data.price);
						this.refund_money = this.maxPrice


						if (this.refund_title == '换货') {
							this.query_exchange_products()
						}
					}
				})
			},


			//换货产品信息
			query_exchange_products() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'refund_showChangeProduct',
						inventoryId: this.inventoryId,
						productId: this.product.productId,
						num: this.product.num,
						priceSale: this.product.priceSale,
					},
				}).then(res => {
					if (res.code == 200) {
						// let data = res.data;
						this.exchange_products = res.data;
					}
				})
			},

			query_address() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'userAddress_lists',
						page: 1,
						pageNum: 100
					},
				}).then(res => {
					if (res.code == 200) {
						let data = res.data
						let list = res.data;
						list.forEach(v => {
							v.full_addr = [v.country, v.province, v.city, v.area].filter(v => !!v).join('-');
							// v.xing = v.name[0] || ''
						})


						let cache_address_id = uni.getStorageSync('cache_refund_address_id');
						console.log('缓存的地址id  cache_address_id', cache_address_id)
						let cache_index = list.findIndex(v => v.id == cache_address_id);
						let default_index = list.findIndex(v => v.moren == 1);

						if (cache_index > -1) {
							this.address_selected = list[cache_index]
						} else {
							uni.removeStorageSync('cache_address_id')
							if (default_index > -1) {
								this.address_selected = list[default_index]
							} else {
								this.address_selected = {}
							}
						}

					}
					this.hideLoading()
				})
			},



			doUpload() {
				this.doUploadFn();
				// util.handleUploadImage({
				// 	count: 6,
				// 	successCallback: (res) => {
				// 		// this.upload_image = res.data.path;
				// 		this.upload_pic_list.push(res.data)
				// 	}
				// });
			},

			// 上传图片
			doUploadFn() {
				// #ifdef H5
				this.do_h5_upload();
				// #endif

				// #ifndef H5
				this.do_mp_upload();
				// #endif
			},


			// H5环境上传图片
			do_h5_upload() {
				let count = this.allowUploadNumber - this.upload_pic_list.length
				uni.chooseImage({
					count: count || 1,
					mediaType: ['image'], // 图片// ['image', 'video']	
					sourceType: ['album', 'camera'], // 从相册选择
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						console.warn('选择图片 success', res)

						// tempFilePaths  路径列表
						// tempFiles			文件列表
						res.tempFiles.forEach(file => {
							this.$apiUpload({
								url: '/service.php',
								method: 'post',
								data: {
									action: 'index_localUpload',
									img: file.path,
									if_touxiang: 0,
								},
							}).then(res => {
								if (res.code == 200) {
									let pic = res.data;
									this.upload_pic_list.push(pic)
								}
							});
						})
					}
				});
			},

			// 小程序环境上传图片
			do_mp_upload() {
				let count = this.allowUploadNumber - this.upload_pic_list.length
				uni.chooseMedia({
					count: count || 1,
					mediaType: ['image'], // 图片// ['image', 'video']	
					sourceType: ['album', 'camera'], // 从相册选择
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						console.warn('选择图片 success', res)

						// tempFilePaths  路径列表
						// tempFiles			文件列表 【{tempFilePath: '临时路径'}】
						res.tempFiles.forEach(file => {
							this.$apiUpload({
								url: '/service.php',
								method: 'post',
								data: {
									action: 'index_localUpload',
									img: file.tempFilePath,
									if_touxiang: 0,
								},
							}).then(res => {
								if (res.code == 200) {
									let pic = res.data;
									this.upload_pic_list.push(pic)
								}
							});
						})
					}
				});
			},

			doPreview(pic) {
				uni.previewImage({
					urls: [pic],
				});
			},

			doRemove(item, index) {
				this.upload_pic_list.splice(index, 1)
			},

			openReason() {
				this.$refs.refund_choose_reason_pop.init()
				// this.show_reason = true
			},
			confirmReason(value) {
				this.refund_reason = value
			},

			openGuige() {
				this.$refs.refund_choose_guige_pop.init(this.exchange_products, this.product)
			},
			confirmGuige(info, num) {
				console.log(info, '规格111')

				var new_product = [{
					"inventoryId": info.id,
					"productId": this.product.productId,
					"num": num
				}]

				this.new_product = new_product
				this.exchange_guige = info.keyVals
			},

			inputRefundMoney(e) {
				console.log(e)
				console.log(e.detail.value)
				console.log('this.maxPrice', this.maxPrice)
				if (parseFloat(e.detail.value) > this.maxPrice) {
					this.$alert('退款金额不应高于' + this.maxPrice + '元')
					this.$nextTick(() => {
						this.refund_money = this.maxPrice
					})
				}
				// if (this.refund_money > this.maxPrice) {
				// 	this.$alert('退款金额大于最大退款金额，请修改')
				// 	return;
				// }
			},

			doSubmit() {
				if (!this.refund_reason) {
					this.$alert('请选择退款原因')
					return
				}
				if (!this.refund_money) {
					this.$alert('请输入退款金额')
					return
				}
				if (this.refund_money > this.maxPrice) {
					this.$alert('退款金额不能超过最多金额')
					return
				}
				
				if (!this.refund_remark) {
					this.$alert('请输入描述内容')
					return
				}
				
				

				if (this.refund_title == '换货') {
					if (!this.address_selected.id) {
						this.$alert('请选择换货收货地址')
						return
					}
				}


				this.mix_throttle(this.doSubmitFn)
			},

			doSubmitFn() {
				let images = this.upload_pic_list.join(',');
				let params = {
					action: 'refund_add',
					orderId: this.orderId,
					inventoryId: this.inventoryId,
					type: this.type, //退换货类型(1-退款 2-退货退款 3-换货)
					num: this.product.num,
					reason: this.refund_reason,
					remark: this.refund_remark,
					images: images,
					money: this.refund_money,
					addressId: this.address_selected.id,
				};
				if (this.type == 3) { //如果是换货
					params.new_product = JSON.stringify(this.new_product)
					// params.num = this.new_product[0].num
					params.money = 0;
				}
				this.$log('表单提交', params)

				this.$api({
					url: '/service.php',
					method: 'get',
					data: params,
				}).then(res => {
					this.$alert(res)
					if (res.code == 200) {
						this.toRoute({
							path: '/refund-submit-success',
							query: {

							}
						})
					}
				})
			},



			//选择地址
			toChooseAddress() {
				this.toRoute({
					path: '/address-list',
					query: {
						from: 'refund'
					}
				})
			},
		}
	}
</script>

<style lang="scss">

</style>

<style lang="scss" scoped>
	.page {
		.page-ctx {
			padding: 24rpx 32rpx;
		}


		.product-info {
			margin-bottom: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		.product-item {
			padding: 40rpx 24rpx;

			&+.product-item {
				border-top: 1rpx solid #eee;
			}

			.poster-box {
				width: 176rpx;
				height: 176rpx;
				border-radius: 8rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				flex: 1;
				overflow: hidden;
				padding-left: 32rpx;

				.title-box {}

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
					line-height: 1.5;
				}

				.desc-box {
					margin-top: 14rpx;

					.desc {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #B3B9C9;
					}
				}


				.price-box {
					margin-top: 24rpx;

					.price-info {
						.huobi {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 20rpx;
							color: #000000;
						}

						.price {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}

						.unit {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 20rpx;
							color: #000000;
						}
					}

					.num {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
					}

				}
			}
		}


		.feedback-info {
			background: #FFFFFF;
			// box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.06);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-top: 16rpx;
			padding: 34rpx 24rpx 40rpx;

			.main-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				margin-bottom: 34rpx;
			}
		}



		.textarea-box {
			margin-top: 20rpx;
			position: relative;

			.statistice-count {
				position: absolute;
				right: 24rpx;
				bottom: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #7D7D7D;
			}

			textarea {
				overflow: hidden;
				background: #FFFFFF;
				background: #F8F8F8;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 1rpx solid transparent;

				padding: 16rpx 24rpx;
				padding-bottom: 50rpx;
				display: block;
				width: 100%;
				min-height: 280rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #333;
			}

			.textarea-p {
				padding-bottom: 50rpx;

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #7D7D7D;
			}
		}




		.upload-wrap {
			margin-top: 30rpx;
		}

		.upload-list {
			display: flex;
			flex-wrap: wrap;


			.upload-item {
				position: relative;
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				margin-bottom: 32rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}

				.remove-box {
					position: absolute;
					z-index: 10;
					top: -10rpx;
					right: -10rpx;

					image {
						width: 42rpx;
						height: 42rpx;
					}
				}

				.preview-box {
					width: 160rpx;
					height: 160rpx;
					background: #FFF;

					image {
						width: 160rpx;
						height: 160rpx;
					}
				}

				.upload-box {
					width: 160rpx;
					height: 160rpx;
					background: #FFF;

					&.shangchuan-box {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
					}


					.image-box {
						display: flex;
						justify-content: center;

						image {
							width: 48rpx;
							height: 42rpx;
						}
					}

					.text {
						margin-top: 16rpx;
						text-align: center;
						font-family: PingFangSC-Medium;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}



			.upload-box {
				width: 160rpx;
				height: 160rpx;
				border: 1rpx solid #ddd;

				.icon-box {
					width: 60rpx;
					height: 60rpx;

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}

				.tip {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #C8C8C8;
				}
			}
		}





		.refund-info {
			width: 100%;
			overflow: hidden;
			padding: 10rpx 0;
			font-size: 28rpx;
			color: #000000;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;



			.refund-reason {
				padding: 24rpx 24rpx;


				.label {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}

				.value {
					padding-left: 40rpx;
					flex: 1;
					overflow: hidden;

					.value-text {
						flex: 1;
						overflow: hidden;
						text-align: right;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
					}

					image {
						margin-left: 24rpx;
						width: 13rpx;
						height: 24rpx;
					}
				}
			}

			.refund-money {
				// padding: 24rpx 24rpx;
				width: 100%;
				overflow: hidden;
				padding: 0rpx 24rpx;


				.label {
					min-width: 200rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}

				.label-tip {
					// flex: 1;
					// overflow: hidden;
					width: fit-content;
					// min-width: 200rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #9695A3;
				}

				.value {
					flex: 1;
					overflow: hidden;
					padding-left: 20rpx;
					justify-content: flex-end;

					.huobi {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
					}

					.input-box {
						display: inline-flex;
						height: 100rpx;
						width: fit-content;
					}


					.input {
						margin: 0 20rpx;
						// padding: 0 20rpx;
						display: inline-flex;
						justify-content: center;
						text-align: center;
						width: min-content;
						min-width: 100rpx;
						//
						height: 100rpx;
						line-height: 100rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
					}

					.input-p {
						display: inline-flex;
						justify-content: center;
						text-align: center;
						width: min-content;
						min-width: 100rpx;
						//
						height: 100rpx;
						line-height: 100rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}


		}

	}





	.addr-wrap {
		padding: 24rpx;
		// padding-right: 0;

		.addr-item {
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}

		.addr-inner {
			margin: 0 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding-bottom: 36rpx;

			.addr-left {
				display: flex;
				align-items: center;
				flex: 1;
				overflow: hidden;
				padding-right: 20rpx;
				padding-right: 10rpx;

				.icon-box {
					padding: 24rpx;

					image {
						width: 56rpx;
						height: 56rpx;
					}
				}

				.ico-dai {
					padding: 24rpx;


					.xing {
						width: 56rpx;
						height: 56rpx;
						background: #4D9EFA;
						font-size: 28rpx;
						font-weight: bold;
						color: #FFFFFF;

						text-align: center;
						border-radius: 50%;
					}
				}

				.user-info {
					.name {
						font-size: 28rpx;
						font-weight: bold;
						color: #000000;
						margin-right: 24rpx;
					}

					.phone {
						font-size: 28rpx;
						color: #333333;
						margin-right: 32rpx;
					}

					.desc {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #CB0011;
					}
				}

				.address-info {
					font-size: 24rpx;
					margin-right: 0;
					margin-top: 12rpx;

					view {

						margin-top: 6rpx;
					}
				}


				.addr-empty {
					font-size: 28rpx;
					color: #000000;
				}
			}

			.addr-right {
				align-self: stretch;
				min-width: 72rpx;


				image {
					margin-left: 24rpx;
					width: 14rpx;
					height: 24rpx;
				}
			}
		}
	}





	// 退货退款
	.return-info {
		.store-address {
			background: #FFFFFF;
			// box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.06);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 34rpx 24rpx 22rpx;
			margin-top: 16rpx;

			.tui-type {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
			}

			.address {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				margin-top: 32rpx;

				.right {
					flex: 1;
					overflow: hidden;
					padding-left: 20rpx;
					display: flex;
					align-items: center;
					text-align: right;

					.address-info {


						.title {
							font-size: 28rpx;
							color: #000000;
						}

						.user {
							font-size: 28rpx;
							color: #9695A3;
							text-align: right;
						}
					}

					image {
						width: 13rpx;
						height: 24rpx;
					}
				}
			}
		}
	}







	.page-foot {
		.btn {
			flex: 1;
			// width: 345rpx;
			height: 80rpx;
			background: #CB0011;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>